<template>
  <div class="app-container">
	<div class="rol-cent">
	<div class="rol-left">
		<el-dialog
		  :title="titles"
		  :visible.sync="isshow"
		  :close-on-click-modal=false
		  width="400px"
		  >
		 <el-form :model="json" :rules="rules" ref="json" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="角色名称" prop="roleName">
			    <el-input v-model="json.roleName" size="mini"></el-input>
			  </el-form-item>
			  <el-form-item label="备注">
			    <el-input v-model="json.remark" size="mini"></el-input>
			  </el-form-item>
			   <div class="subbtn">
			    <el-button type="primary" @click="addbtn('json')">确 定</el-button>
			  </div>
		 </el-form>
		</el-dialog>
		<div class="rol-left-list">
			<ul>
				<li class="rol-left-one rol-num">
					<p>共<span class="totalnum">{{totalCount}}</span>个角色</p>
					<p class="add" @click="addroles"><i class="iconfont icon-plus"></i>新建</p>
				</li>
				<li class="rol-left-li" v-for="(item,index) in allroles" :key="item.id" @click="roleEdit(item)"  v-bind:class="{'rol-act':item.id == roleAct}">
					<div class="li_content">
						<div id="">
							<i v-if='item.isStatic' title="系统角色" class="iconfont icon-role-sys"></i>
							<i v-else title="自定义角色" class="iconfont icon-role"></i>
							<span class="nametext" :title="item.displayName">					<!--是否启用  isActive-->
								{{item.displayName}}
							</span>
              <i v-if="!item.isActive" class="iconfont icon-jinyong"></i>
						</div>
						<span v-if="item.remark" class="markes" :title="item.remark">
							{{item.remark}}
						</span>
					</div>
					<div class="changebtn">
						<i class="iconfont icon-xiala"></i>
						<div class="dropdown">
							<!--是否模板  isStatic -->
							<p @click.stop="isdisable(item,index)" v-if="item.isActive">禁用</p>
							<p @click.stop="isdisable(item,index)" v-else>启用</p>
							<p v-if="!item.isStatic" @click.stop="isedit(item,index)">编辑</p>
							<p v-if="!item.isStatic" @click.stop="isdelete(item,index)">删除</p>
						</div>
					</div>
					<!--<span class="rol-jin" v-if="!item.isActive">已禁用</span>-->
				</li>

			</ul>
			<!--<button class="rol-add" @click="rolAdd()">
				<i class="iconfont icon-plus"></i>新建角色
			</button>-->
		</div>
	</div>
	<div class="rol-right">
		<!--<div class="rol-right-top">
			<div class="rol-right-name">
				{{roledetail.displayName?roledetail.displayName:'新建角色'}}
			</div>
			<div class="rol-right-btn">
			</div>
		</div>
		<div class="rol-form">
			<el-form  :model="formLabel" label-width="100px" :inline="true" :rules="rules" ref="formLabel">
			<div class="wd600">
				<el-form-item label="角色名称：" class="is-required" prop="username">
		            <el-input v-model="formLabel.username" placeholder="请填写角色名称！" size="mini"  class="wd184"></el-input>
		        </el-form-item>
				<el-form-item label="状态：" class='toR'>
		            <el-select v-model="formLabel.state" placeholder="请选择" size="mini" class="wd154">
		              <el-option v-for="item in formLabel.status" :key="item.value" :value="item.isActive" :label="item.value">
		              </el-option>
		            </el-select>
		        </el-form-item>
				<el-form-item label="备注：">
		            <el-input v-model="formLabel.textarea" placeholder="请填写备注！" size="mini"  class="wd500"></el-input>
		        </el-form-item>
			</div>
		</el-form>
		</div>
		<div class="rol-tree clear">
			<div class="rol-tree-name">
				权限：
			</div>
			<div class="rol-tree-box">
                <el-tree
                  :data="roletree"
                  show-checkbox
                  node-key="name"
                  :default-expand-all='true'
                  :default-checked-keys="treeArr"
                  :props="defaultProps"
                  ref="tree"
                 >
                </el-tree>
			</div>
		</div>
		<div class="rol-bottom">
			<el-button type="info" size="small" @click="resetForm('formLabel')">取消</el-button>
            <el-button type="primary" size="small" @click="submitForm('formLabel')">保存</el-button>
		</div>
	
	-->
	<div class="right_top">
		<p><i class="iconfont" :class="roledetail.isStatic?'icon-role-sys':'icon-role'"></i>{{roledetail.displayName?roledetail.displayName:'新建角色'}}</p>
		<div class="ismodel" :class="roledetail.isStatic?'edit':'isedit'">
			<p v-if="roledetail.isStatic">该角色为系统设置的角色，权限不可编辑，请选择自定义角色或添加新角色进行编辑！</p>
			<div v-else class="copyuser">
				<p class="aleradyusers">复制已有角色</p>
				<el-select class="modelselets" size="mini" v-model="copyuser" placeholder="请选择" @change="roleEdit2(copyuser)">
			    <el-option
			      v-for="item in allroles" :key="item.id"
			      :label="item.displayName"
			      :value="item.id">
			    </el-option>
		  </el-select>
			</div>
		</div>
	</div>
	<div class="right_content">
		<div class="content_top">
				<span>全选</span><el-checkbox v-model="allchose" class='isallchose' @change="isallchose"></el-checkbox>
		</div>
		<div class="content_list" v-for="(item,index) in roletree" :key="item.id">
			<div class="first_leave">
					{{item.displayName}}			
			</div>
			<!--<div class="second_level" v-if="item.permissionItems==0">
					<div class="three_level">
								<p class="titletext"></p>
								<div class="checktext">
										<el-checkbox>{{item.displayName}}</el-checkbox>
								</div>	
					</div>
					
			</div>-->
			<div class="second_level">
					<div class="three_level"  v-for="(list,listindex) in item.permissionItems"  :key="list.id">
								<p v-if="list.permissionItems.length==0" class="titletext"></p>
								<p v-else class="titletext">{{list.displayName}}</p>
								<div class="checktext" v-if="list.permissionItems.length==0">
										<el-checkbox v-model="list.isGranted">{{list.displayName}}</el-checkbox>
								</div>
								<div class="checktext" v-else>
										<el-checkbox v-model="val.isGranted"  v-for="(val) in list.permissionItems"  :key="val.id">{{val.displayName}}</el-checkbox>
								</div>
								<el-checkbox v-if="list.permissionItems.length>0" v-model="list.linechose" class="linechose" @change="linechange(index,listindex)"></el-checkbox>
								<el-checkbox v-if="list.permissionItems.length==0" v-model="list.linechose" @change="onechange(item.permissionItems,index,listindex)" class="linechose"></el-checkbox>
				
					
					
					</div>
					
				<!--<p class="titletext">{{list.displayName}}</p>
					-->
			</div>			
		</div>
		
	</div>
	 <el-button v-if="!roledetail.isStatic" class='submits' @click="cksubmitbtn" :loading="loading" type="primary" size="mini">保存</el-button>
		<!--<button v-if="!roledetail.isStatic" class='submits' @click="cksubmitbtn">保存</button>-->
	</div>
	</div>
</div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      titles: "新建角色",
      json: {
        roleName: "",
        remark: ""
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ]
      },
      treeArr: [],
      formLabel: {
        username: "",
        state: "",
        status: [
          {
            isActive: true,
            value: "正常"
          },
          {
            isActive: false,
            value: "禁用"
          }
        ],
        textarea: ""
      },
      defaultProps: {
        children: "permissionItems",
        label: "displayName"
      },
      totalCount: "",
      allroles: [],
      isAdd: false, //false为更新，true为添加
      roleAct: 0, // 选中样式
      roledetail: {}, // 选中对象
      roletree: [], // 树
      treeSelect: [], //选中的树
      //				rules:{
      //					username: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
      //				},
      copyuser: "",
      allchose: false,
      isshow: false,
      Defaultpermissions: null,
      loading: false
    };
  },
  mounted() {
    this.userlist();
    //this.loadrole();
  },
  methods: {
    //禁用
    isdisable(val, e) {
      let str = !val.isActive ? "是否启用？" : "是否禁用？";
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        let params = {
          id: val.id
        };
        this.post(params, "services/app/role/UpdateRoleState").then(res => {
          this.Defaultpermissions = val;
          this.userlist();
        });
      });
    },
    isedit(val) {
      this.titles = "编辑角色";
      this.isshow = true;
      this.json = {
        id: val.id,
        roleName: val.displayName,
        remark: val.remark
      };
    },
    isdelete(val, e) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = {
          id: val.id
        };
        this.post(params, "services/app/role/DeleteRole").then(res => {
          this.Defaultpermissions = null;
          this.userlist();
        });
      });
    },
    //得到权限集合
    treearray(data) {
      // console.log(data)
      var treeArr = [];
      var treeNames = [];
      data.map(function(item) {
        if (item.isGranted) {
          treeArr.push(item.name);
          treeNames.push(item.displayName);
        }
        if (item.permissionItems.length > 0) {
          //遍历2级
          item.permissionItems.map(function(elem) {
            if (elem.isGranted) {
              treeArr.push(elem.name);
              treeNames.push(elem.displayName);
            }
            if (elem.permissionItems.length > 0) {
              //遍历3级
              elem.permissionItems.map(function(obj) {
                if (obj.isGranted) {
                  treeArr.push(obj.name);
                  treeNames.push(obj.displayName);
                }

                if (obj.permissionItems.length > 0) {
                  //遍历4级
                  obj.permissionItems.map(function(last) {
                    if (last.isGranted) {
                      treeArr.push(last.name);
                      treeNames.push(last.displayName);
                    }
                    //遍历3级
                  });
                }
              });
            }
          });
        }
      });
      return { treeArr, treeNames };
    },
    // 验证
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isAdd) {
            this.saveRole();
            this.resetForm("formLabel");
          } else {
            this.saveRole(this.roledetail.id);
            this.resetForm("formLabel");
          }
          // this.save()
        } else {
          console.log("error submit");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.formLabel.state = "";
      this.formLabel.textarea = "";
      this.roledetail.displayName = "";
      this.loadrole();
      this.treeArr = [];
    },
    // 用户
    userlist() {
      let params = {};
      this.post(params, "services/app/role/GetAllRoles").then(rs => {
        this.allroles = rs.result.items;
        this.totalCount = rs.result.totalCount;
        //	this.Defaultpermissions=this.allroles[0]
        let params = this.Defaultpermissions
          ? this.Defaultpermissions
          : this.allroles[0];
        this.roleEdit(params);
      });
    },
    //新建角色
    rolAdd() {
      this.roledetail = {};
      this.isAdd = true;
      this.resetForm("formLabel");
      this.treeArr = [];
    },
    rolAdd() {},
    //进入时默认获取权限
    loadrole(data) {
      let params = { id: data };
      this.post(params, "services/app/permission/GetAllPermissionTrees").then(
        rs => {
          if (rs.success) {
            let roletree = rs.result.items[0].permissionItems;
            for (let i = 0; i < roletree.length; i++) {
              if (roletree[i].permissionItems.length == 0) {
                roletree[i].permissionItems.push({
                  displayName: roletree[i].displayName,
                  isGranted: roletree[i].isGranted,
                  linechose: roletree[i].linechose,
                  name: roletree[i].name,
                  parentName: roletree[i].parentName,
                  permissionItems: []
                });
              }
              let istrue = true;
              for (let j = 0; j < roletree[i].permissionItems.length; j++) {
                if (roletree[i].permissionItems[j].isGranted == false) {
                  istrue = false;
                }
                roletree[i].permissionItems[j].linechose = istrue;
              }
            }

            this.roletree = roletree;
          }
        }
      );
    },
    //全选
    isallchose() {
      console.log(this.roletree);
      if (this.allchose == true) {
        for (let i = 0; i < this.roletree.length; i++) {
          for (let j = 0; j < this.roletree[i].permissionItems.length; j++) {
            //roletree[i].permissionItems[j].linechose=istrue
            Vue.set(this.roletree[i].permissionItems[j], "isGranted", true);
            for (
              let m = 0;
              m < this.roletree[i].permissionItems[j].permissionItems.length;
              m++
            ) {
              Vue.set(
                this.roletree[i].permissionItems[j].permissionItems[m],
                "isGranted",
                true
              );
            }
          }
        }
      } else {
        for (let i = 0; i < this.roletree.length; i++) {
          for (let j = 0; j < this.roletree[i].permissionItems.length; j++) {
            Vue.set(this.roletree[i].permissionItems[j], "isGranted", false);
            for (
              let m = 0;
              m < this.roletree[i].permissionItems[j].permissionItems.length;
              m++
            ) {
              Vue.set(
                this.roletree[i].permissionItems[j].permissionItems[m],
                "isGranted",
                false
              );
            }
          }
        }
      }
    },
    //行全选
    linechange(e, s) {
      //e外下表 s内下边  roletree  roletree[i].permissionItems[j].linechose=istrue

      if (this.roletree[e].permissionItems[s].linechose == true) {
        for (
          var i = 0;
          i < this.roletree[e].permissionItems[s].permissionItems.length;
          i++
        ) {
          Vue.set(
            this.roletree[e].permissionItems[s].permissionItems[i],
            "isGranted",
            true
          );
        }
      } else {
        for (
          var i = 0;
          i < this.roletree[e].permissionItems[s].permissionItems.length;
          i++
        ) {
          Vue.set(
            this.roletree[e].permissionItems[s].permissionItems[i],
            "isGranted",
            false
          );
        }
      }
    },
    onechange(val, e, s) {
      console.log(val);
      if (this.roletree[e].permissionItems[0].linechose == true) {
        Vue.set(this.roletree[e].permissionItems[0], "isGranted", true);
      } else {
        Vue.set(this.roletree[e].permissionItems[0], "isGranted", false);
      }
    },
    //select
    roleEdit2(data) {
      let params = {
        id: data
      };
      this.post(params, "services/app/role/GetRolePermissionsEdit").then(rs => {
        console.log(rs);
        console.log("树------------");
        if (rs.success) {
          let roletree = rs.result.permissions[0].permissionItems;
          for (let i = 0; i < roletree.length; i++) {
            if (roletree[i].permissionItems.length == 0) {
              roletree[i].permissionItems.push({
                displayName: roletree[i].displayName,
                isGranted: roletree[i].isGranted,
                linechose: roletree[i].linechose,
                name: roletree[i].name,
                parentName: roletree[i].parentName,
                permissionItems: []
              });
            }
            let istrue = false;
            for (let j = 0; j < roletree[i].permissionItems.length; j++) {
              //								if(roletree[i].permissionItems[j].isGranted==false){
              //									istrue=false
              //								}
              roletree[i].permissionItems[j].linechose = istrue;
            }
          }

          this.roletree = roletree;
          console.log("success");
          console.log(roletree);
        }
      });
    },

    // 编辑
    roleEdit(data) {
      console.log(data);
      this.allchose = false;
      this.copyuser = "";
      this.formLabel.state = "";
      this.isAdd = false;
      this.roleAct = data.id;
      let params = {
        id: data.id
      };
      this.post(params, "services/app/role/GetRolePermissionsEdit").then(rs => {
        console.log(rs);
        console.log("树------------");
        if (rs.success) {
          let roledetail = rs.result.role;
          this.roledetail = roledetail; //角色详情

          let roletree = rs.result.permissions[0].permissionItems;
          for (let i = 0; i < roletree.length; i++) {
            if (roletree[i].permissionItems.length == 0) {
              roletree[i].permissionItems.push({
                displayName: roletree[i].displayName,
                isGranted: roletree[i].isGranted,
                linechose: roletree[i].linechose,
                name: roletree[i].name,
                parentName: roletree[i].parentName,
                permissionItems: []
              });
            }

            //let istrue=true
            let istrue = false;
            for (let j = 0; j < roletree[i].permissionItems.length; j++) {
              //								if(roletree[i].permissionItems[j].isGranted==false){
              //									istrue=false
              //								}
              roletree[i].permissionItems[j].linechose = istrue;
            }
          }

          this.roletree = roletree;
          this.formLabel.state = rs.result.role.isActive;
          this.formLabel.username = rs.result.role.displayName;
          this.formLabel.textarea = rs.result.role.remark;

          this.treeArr = this.treearray(roletree).treeArr;
        }
      });
    },
    // 得到对应的分配树
    getTree(tree) {},
    // 树值
    getCheckedKeys() {
      this.treeSelect = this.$refs.tree.getCheckedKeys();
      // console.log('---------/////////----------')
      // console.log(this.treeSelect)
    },
    //新增编辑角色
    saveRole(id) {
      let params = {};
      this.getCheckedKeys();
      const that = this;
      if (id) {
        params = {
          role: {
            displayName: that.formLabel.username,
            isDefault: false,
            isActive: that.formLabel.state,
            remark: that.formLabel.textarea,
            id: id
          },
          grantedPermissionNames: that.treeSelect
        };
      } else {
        params = {
          role: {
            displayName: that.formLabel.username,
            isDefault: false,
            isActive: that.formLabel.state,
            remark: that.formLabel.textarea
          },
          grantedPermissionNames: that.treeSelect
        };
      }
      // console.log('0000000000000000000-------------');
      // console.log(that.treeSelect);
      that.post(params, "services/app/role/CreateOrUpdateRole").then(rs => {
        if (rs.success) {
          that.userlist();
        }
      });
    },
    cksubmitbtn() {
      //console.log(this.roledetail)
      let arr = [];
      this.loading = true;
      for (let i = 0; i < this.roletree.length; i++) {
        for (let j = 0; j < this.roletree[i].permissionItems.length; j++) {
          if (this.roletree[i].permissionItems[j].permissionItems.length == 0) {
            if (this.roletree[i].permissionItems[j].isGranted == true) {
              arr.push(this.roletree[i].permissionItems[j].name);
            }
          } else {
            for (
              var m = 0;
              m < this.roletree[i].permissionItems[j].permissionItems.length;
              m++
            ) {
              if (
                this.roletree[i].permissionItems[j].permissionItems[m]
                  .isGranted == true
              ) {
                arr.push(
                  this.roletree[i].permissionItems[j].permissionItems[m].name
                );
              }
            }
          }
        }
      }

      let params = {
        id: this.roledetail.id,
        grantedPermissionNames: arr
      };
      this.post(params, "services/app/role/UpdateRolePermissions").then(res => {
        this.copyuser = "";
        this.loading = false;
        this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success"
        });
      });
    },
    //新建角色
    addroles() {
      this.isshow = true;
      this.json = {};
      this.titles = "新建角色";
    },
    addbtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //edit  services/app/role/EditRole
          if (this.json.id) {
            this.post(this.json, "services/app/role/EditRole").then(rs => {
              this.roleAct = rs.result;
              let obj = {
                id: rs.result
              };
              this.Defaultpermissions = obj;
              this.userlist();
              //	this.roleEdit(obj)
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success"
              });
              this.isshow = false;
            });
          } else {
            this.post(this.json, "services/app/role/CreateRole")
              .then(rs => {
                this.roleAct = rs.result;
                let obj = {
                  id: rs.result
                };
                this.Defaultpermissions = obj;
                this.userlist();
                this.roleEdit(obj);
                this.$notify({
                  title: "成功",
                  message: "新建成功",
                  type: "success"
                });
                this.isshow = false;
              })
              .catch(err => {
                console.log("shibai");
                console.log(err);
                this.$message.error(err.message);
              });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.wd500 {
  width: 500px;
}
.wd154 {
  width: 154px;
}
.wd184 {
  width: 184px;
}
.wd600 {
  width: 610px;
}
.toR {
  float: right;
}
.el-form-item.is-required .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.rol-cent {
  overflow: hidden;
  // height: 100%;
  // border-radius: 3px;
  position: relative;
  // border: 1px solid #ddd;
  padding-left: 260px;
  //margin-bottom: 20px;
  // overflow-y: auto
}
.rol-left {
  width: 260px;
  height: 100%;
  background-color: #f6f6f6;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  padding-bottom: 95px;
  .rol-left-one {
    width: 260px;
    height: 40px;
    color: #555555;
    padding: 0 15px;
    font-size: 13px;
    border-bottom: 1px solid #ddd;

    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add {
      cursor: pointer;
      font-size: 14px;
      color: #027dca;
      i {
        margin-right: 8px;
      }
    }
  }
  .rol-left-list {
    ul {
      padding: 0;
      margin: 0;
    }
    .rol-left-li {
      width: 260px;
      height: 60px;
      color: #555555;
      padding: 0 0 0 15px;
      font-size: 13px;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-left: 4px solid transparent;
      i {
        font-size: 13px;
      }
      .icon-jinyong {
        font-size: 10px;
        margin-left: 21.5px;
        color: #aeaeae;
      }
      .li_content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        div {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 5px;
          i {
            color: #999;
          }
        }
        span {
          display: block;
          height: 18px;
          color: #999999;
          margin-left: 11px;
          width: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .markes {
          text-indent: 12px;
          font-size: 12px;
        }
        .nametext {
          color: #333333;
          font-size: 13px;
          display: flex;
          align-items: center;
          width:132px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;
          display: inline-block
        }
      }
      .rol-jin {
        background: #ccc;
        color: #333;
        display: inline-block;
        border-radius: 5px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        padding: 0 2px;
        position: absolute;
        right: 30px;
        top: 10px;
      }
      .i {
        font-size: 20px;
      }
      .rol-num {
        color: #333;
      }
    }
    .rol-left-li:first-child {
      height: 40px;
      line-height: 40px;
    }
    .rol-act {
      background: #ffffff;
      color: #ee6000;
      box-sizing: border-box;
      border-left: 4px solid #ff7819;
      .li_content {
        div {
          i {
            color: #ee6000;
          }
        }
      }
      .li_content {
        .nametext {
          color: #ee6000;
        }
      }
    }
    .ddd {
      background: #000;
    }
  }
}
/*.rol-right{
			// width: 100%;
			// height: 100%;
			// // min-width: 915px;
			// min-width: 800px;
			// background: #fff;
			// border-top:1px solid #ddd;
			// border-right:1px solid #ddd;
			// border-bottom :1px solid #ddd;
			//float: left;
		    padding-bottom: 50px;
		    //width: 100%;
		    background: #fff;
		    border-left: 1px solid #ddd;
		    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
		    position: relative;
		    z-index: 2;
			.rol-right-top{
				width: 100%;
				height: 60px;
				border-bottom: 1px solid #e7e7e7;
				padding:0 35px;
				position: relative;
				.rol-right-name{
					padding:15px 0 ;
					color: #555;
					font-size: 18px;
				}
				.rol-right-btn{
					position: absolute;
					right:35px;
					top:14px;


				}
			}
			.rol-form{
				padding:35px 35px 0 35px;
				.rol-row{
					display: flex;
					width: 100%;
					.rol-col{
						flex:1;
						height: 28px;
						margin-bottom: 21px;
						.rol-label{
							width:85px;
							text-align: right;
							font-size: 13px;
							color: #666;
							font-weight: normal;
							line-height: 28px;
							margin:0;
							float: left;
						}
						.rol-input{
							width:250px;
							float: left;
						}
						.rol-remark{
						}
					}
				}
			}
			.rol-tree{
				padding-left:35px;
				.rol-tree-name{
					width:100px;
				    text-align: right;
				    float: left;
				    font-size: 14px;
				    color: #606266;
				    padding: 0 12px 0 0;
				    -webkit-box-sizing: border-box;
				    box-sizing: border-box;
				}
				.uitl-tree{
					width: 500px;
					float: left;
					padding:0 30px;
					margin-top:-10px;
				}
				.rol-tree-box{
					height: 400px;
					overflow-y: auto;
					padding: 30px;
					margin-bottom: 30px;
					border: 1px solid #ddd;
					width: 500px;
					border-radius:5px;
				}
			}
			.rol-bottom{
				padding-left:135px;
				.button-default{
					margin-right: 40px!important;
				}
			}
		}*/
.rol-add {
  margin: 10px 15px;
  width: 200px;
  height: 30px;
  text-align: center;
  color: #ee6000;
  background: none;
  border: none;
  border: 1px dashed #ee6000;
  border-radius: 5px;
  i {
    color: #ee6000;
  }
}
.totalnum {
  color: red;
}
.rol-left-li:not(:first-of-type):hover {
  background: #ffffff;
}
.rol-left-li:not(:first-of-type):hover .changebtn {
  display: block;
}
.changebtn {
  position: relative;
  width: 59px;
  height: 100%;
  margin-left: 10px;
  line-height: 59px;
  text-align: center;
  display: none;
  .dropdown {
    display: none;
    position: absolute;
    width: 100%;
    min-height: 31px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #ffffff;
    left: 0;
    top: 44px;
    z-index: 33;
    p {
      text-align: center;
      font-size: 13px;
      color: #666666;
      line-height: 31px;
      margin: 0;
      padding: 0;
    }
    p:not(:last-of-type) {
      border-bottom: 1px solid #dddddd;
    }
  }
}
.changebtn:hover .dropdown {
  display: block;
}
.dropdown > p:hover {
  background-color: #ecf5ff;
}

.rol-right {
  width: 100%;
  height: 100%;
  min-width: 915px;
  min-width: 800px;
  background: #fff;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  float: left;
  padding-bottom: 50px;
  width: 100%;
  background: #fff;
  border-left: 1px solid #ddd;
  position: relative;
  padding-left: 21px;
  padding-right: 19px;
  z-index: 2;
  .right_top {
    width: 100%;
    height: 85px;
    padding-top: 1px;
    margin-bottom: 15px;
    p {
      width: 100%;
      height: 25px;
      line-height: 25px;
      margin: 26px 0 15px 0;
      font-size: 18px;
      color: #333333;
      i {
        font-size: 16px;
        color: #ff7819;
        margin-right: 16px;
      }
    }
    .edit {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .isedit {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .ismodel {
      p {
        width: 500px;
        font-size: 12px;
        color: #f56c6c;
        margin: 0;
      }
      .copyuser {
        width: 250px;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .aleradyusers {
          width: 91px;
          display: flex;
          align-items: center;
          margin: 0;
          font-size: 13px;
          color: #666666;
        }
        .modelselets {
          width: 150px;
          font-size: 13px;
          color: #333333;
        }
      }
    }
  }
}
.right_content {
  margin-top: 15px;
  border: 1px solid #d9d9d9;
  .content_top {
    width: 100%;
    min-height: 45px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      margin-right: 5px;
      color: #cbcbcb;
    }
    .isallchose {
      margin-right: 18px;
    }
  }
  .content_list {
    width: 100%;
    min-height: 45px;
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    color: #666666;
    .first_leave {
      width: 130px;
      min-height: 45px;
      border-right: 1px solid #d9d9d9;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #d9d9d9;
    }
    .second_level {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: calc(100% - 130px);

      .three_level {
        width: 100%;
        min-height: 45px;
        display: flex;
        justify-content: flex-start;
        border-top: 1px solid #d9d9d9;
        align-items: center;
        position: relative;
        .linechose {
          position: absolute;
          top: 0;
          right: 0;
          width: 50px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 0;
        }
        .titletext {
          width: 132px;
          height: 100%;
          text-align: center;
        }
        .checktext {
          width: 575px;
          // height: 45px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          margin-right: 60px;
          margin-left: 20px;
        }
      }
    }
  }
}
.submits {
  display: block;
  width: 100px;
  height: 32px;
  cursor: pointer;
  background: #ff7819;
  border: 1px solid #ee6000;
  border-radius: 5px;
  margin: 49px auto 0;
  font-size: 14px;
  color: #ffffff;
}
.icon-xiala {
  border: 1px solid #999999;
  color: #999999;
  border-radius: 3px;
}
.subbtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.subbtn button {
  margin: 0;
}
</style>